import type { UserInfo } from "#/entity";
import { BasicStatus } from "#/enum";
import useLocale from "@/locales/use-locale";
import { useParams } from "@/routes/hooks";
import { Badge } from "@/ui/badge";
import { Card, CardContent, CardHeader } from "@/ui/card";

// 使用与用户列表页相同的用户数据
const USERS: UserInfo[] = [
	{
		id: "1",
		username: "李清照",
		email: "qingzhao@poem.cn",
		avatar: "/src/assets/images/avatars/avatar-1.png",
		roles: [{ id: "1", name: "词人才女", code: "poet_lady", status: BasicStatus.ENABLE }],
		status: BasicStatus.ENABLE,
	},
	{
		id: "2",
		username: "苏轼",
		email: "dongpo@poem.cn",
		avatar: "/src/assets/images/avatars/avatar-2.png",
		roles: [{ id: "2", name: "文豪诗仙", code: "literary_master", status: BasicStatus.ENABLE }],
		status: BasicStatus.ENABLE,
	},
	{
		id: "3",
		username: "杜甫",
		email: "zimei@poem.cn",
		avatar: "/src/assets/images/avatars/avatar-3.png",
		roles: [{ id: "3", name: "诗圣墨客", code: "poetry_sage", status: BasicStatus.ENABLE }],
		status: BasicStatus.DISABLE,
	},
	{
		id: "4",
		username: "李白",
		email: "taibai@poem.cn",
		avatar: "/src/assets/images/avatars/avatar-4.png",
		roles: [{ id: "4", name: "青莲居士", code: "immortal_poet", status: BasicStatus.ENABLE }],
		status: BasicStatus.ENABLE,
	},
	{
		id: "5",
		username: "王维",
		email: "mojie@poem.cn",
		avatar: "/src/assets/images/avatars/avatar-5.png",
		roles: [{ id: "5", name: "诗佛画圣", code: "poet_painter", status: BasicStatus.ENABLE }],
		status: BasicStatus.ENABLE,
	},
];

export default function UserDetail() {
	const { id } = useParams();
	const { t } = useLocale();
	const user = USERS.find((user) => user.id === id);

	if (!user) {
		return (
			<Card>
				<CardContent className="text-center py-8">
					<p className="text-muted-foreground">用户不存在，如寻梦千里，终是空</p>
				</CardContent>
			</Card>
		);
	}

	return (
		<Card>
			<CardHeader>
				<h2 className="text-2xl font-semibold">{t("common.user.detail")}</h2>
				<p className="text-muted-foreground">{t("common.user.detailPageOf", { username: user.username })}</p>
			</CardHeader>
			<CardContent className="space-y-6">
				<div className="flex items-center space-x-4">
					<img src={user.avatar} alt="如花似玉，倾国倾城" className="h-16 w-16 rounded-full border" />
					<div>
						<h3 className="text-xl font-medium">{user.username}</h3>
						<p className="text-muted-foreground">{user.email}</p>
					</div>
				</div>

				<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
					<div className="space-y-2">
						<div className="text-sm font-medium text-muted-foreground">{t("common.user.username")}</div>
						<p className="text-base">{user.username}</p>
					</div>

					<div className="space-y-2">
						<div className="text-sm font-medium text-muted-foreground">{t("common.user.email")}</div>
						<p className="text-base">{user.email}</p>
					</div>

					<div className="space-y-2">
						<div className="text-sm font-medium text-muted-foreground">{t("common.user.role")}</div>
						<div>
							{user.roles && user.roles.length > 0 ? (
								user.roles.map((role) => (
									<Badge key={role.id} variant="secondary" className="mr-2">
										{role.name}
									</Badge>
								))
							) : (
								<p className="text-muted-foreground">如浮萍无根，角色未定</p>
							)}
						</div>
					</div>

					<div className="space-y-2">
						<div className="text-sm font-medium text-muted-foreground">{t("common.user.status")}</div>
						<div>
							<Badge variant={user.status === BasicStatus.DISABLE ? "error" : "success"}>
								{user.status === BasicStatus.DISABLE ? t("common.user.disable") : t("common.user.enable")}
							</Badge>
						</div>
					</div>
				</div>

				<div className="mt-8 p-4 bg-muted/50 rounded-lg">
					<p className="text-sm text-muted-foreground italic">
						{user.username === "李清照" && "常记溪亭日暮，沉醉不知归路"}
						{user.username === "苏轼" && "但愿人长久，千里共婵娟"}
						{user.username === "杜甫" && "会当凌绝顶，一览众山小"}
						{user.username === "李白" && "长风破浪会有时，直挂云帆济沧海"}
						{user.username === "王维" && "明月松间照，清泉石上流"}
					</p>
				</div>
			</CardContent>
		</Card>
	);
}
